<template>
  <s-layout>
    <view class="team">
       <view class="team-tab">
        <view class="team-tab-box">
          <view class="tab-item" v-for="(item,index) in tablist" :key="index">
            <view :class="{'active':current===index}" @click="handleTab(index)">{{item}}</view>
          </view>
        </view>
      </view>
      <!-- 流水记录/团队奖励 -->
      <scroll-view class="team-box" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" refresher-background="#f8f4f3" @refresherrefresh="onRefresh" @scrolltolower='lower'>
        <view v-if="flowingList.length > 0">
          <view v-for="order in flowingList" :key="order.userFlowingId">
            <uni-card :is-shadow="false" :border="false">
              <view class="card-top">
                <view class="card-top-left">
                  <text style="color: #999; font-size: 24rpx;" class="mr-2">流水编号: {{order.userFlowingId}}</text>
                  <u-image src="/static/img/copy.png" width="24rpx" height="24rpx" @click="copy(order.userFlowingId)"></u-image>
                </view>
              </view>
              <u-divider></u-divider>
              <view class="goodsItem">
                <view class="goodsInfo">
                  <view class="title">
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 0">签到奖励</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 1">打手佣金</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 2">提现</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 3">余额充值</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 6">余额支付</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 7">退款</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 15">打赏</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 23">平台充值</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 33">抽奖</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 34">完成订单赠送积分</text>
                    <text style="color: #000;font-weight: 700;" v-if="order.type == 35">积分兑换</text>
                    <text style="color: #FF7433;font-weight: 700;" v-if="order.amount>=0">{{order.amount}} {{current==0?'元':'积分'}}</text>
                    <text style="color: #999;font-weight: 700;" v-if="order.amount<0">{{order.amount}} {{current==0?'元':'积分'}}</text>
                  </view>
                  <text style="color: #999; font-size: 24rpx;" v-if="order.type == 2 && order.amount>0">提现驳回返还金额</text>
                   <text style="color: #999; font-size: 24rpx;" v-if="order.type == 15">{{order.amount>0?"打赏人:":"打赏:"}} {{order.subordinate}}</text>
                  <text style="color: #999; font-size: 24rpx;" v-if="order.type == 1 || order.type == 6">订单编号: {{order.subordinateId}}</text>
                  <text style="color: #999; font-size: 24rpx;" v-if="current === 0">记录时间: {{order.createTime}}</text>
                  <text style="color: #999; font-size: 24rpx;" v-if="current === 2">到账时间: {{order.updateTime}}</text>
                </view>
              </view>
            </uni-card>
          </view>
          <uni-load-more :status="loadStatus" :contentText="contentText" />
        </view>
        <s-empty v-else />
      </scroll-view>
      <!-- 提现记录 -->
      <!-- <scroll-view class="team-box" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" refresher-background="#f8f4f3" @refresherrefresh="onRefresh" @scrolltolower='lower' v-if="current === 1">
        <view v-if="auditList.length > 0">
          <view v-for="order in auditList" :key="order.auditId">
            <uni-card>
              <view class="card-top">
                <view class="card-top-left">
                  <text style="color: #999; font-size: 24rpx;" class="mr-2">流水编号: {{order.auditId}}</text>
                  <u-image src="/static/img/copy.png" width="24rpx" height="24rpx" @click="copy(order.auditId)"></u-image>
                </view>
                <text style="color: #999; font-size: 24rpx;" v-if="order.status == 0">审核中</text>
                <text style="color: #000; font-size: 24rpx;" v-if="order.status == 1">提现成功</text>
                <text style="color: red; font-size: 24rpx;" v-if="order.status == 2">提现失败</text>
              </view>
              <u-divider></u-divider>
              <view class="goodsItem">
                <view class="goodsInfo">
                  <view class="title">
                    <text style="color: #000;font-weight: 700;">收款账号: {{order.alipay}}</text>
                    <text style="color: #FF7433;font-weight: 700;">{{order.balance}} 元</text>
                  </view>
                  <text style="color: #999; font-size: 24rpx;"></text>
                  <text style="color: #999; font-size: 24rpx;" v-if="order.status == 2">失败原因: {{order.reason}}</text>
                  <text style="color: #999; font-size: 24rpx;">提现时间: {{order.createTime}}</text>
                </view>
              </view>
            </uni-card>
          </view>
          <uni-load-more :status="loadStatus" :contentText="contentText" />
        </view>
        <s-empty v-else />
      </scroll-view> -->
      <!-- 授权弹窗 -->
      <s-auth-modal />
    </view>
  </s-layout>
</template>

<script>
import { getFlowingApi, getAuditListApi } from "@/sheep/api/index";
export default {
  data() {
    return {
      tablist: ["余额", "积分"],
      current: 0,
      triggered: false,
      loadStatus: "",
      contentText: {
        contentdown: "查看更多",
        contentrefresh: "加载中",
        contentnomore: "没有更多了",
      },
      paramsPage: {
        pageNum: 1,
        pageSize: 10,
      },
      type: 0,
      flowingList: [],
      auditList: [],
    };
  },
  onLoad(options) {
    if (options?.type) {
      this.current = Number(options.type);
      // this.type = this.current;
    }
    this.getList();
  },
  methods: {
    copy(value) {
      uni.setClipboardData({
        data: value,
        success: function () {},
      });
    },
    handleTab(index) {
      this.current = index;
      // this.type = index;
      this.paramsPage.pageNum = 1;
      this.flowingList = [];
      this.auditList = [];
      this.getList();
    },
    async getList() {
      if (this.type == 0) {
        this.paramsPage.type = null;
        this.paramsPage.flowingType = Number(this.current)+1;
        const { rows } = await getFlowingApi(this.paramsPage);
        this.flowingList = this.flowingList.concat(rows);
        this.triggered = false;
        if (rows?.length < this.paramsPage.pageSize) {
          this.loadStatus = "noMore";
        } else {
          this.loadStatus = "more";
        }
      }
      if (this.type == 1) {
        this.paramsPage.type = null;
        const { rows } = await getAuditListApi(this.paramsPage);
        this.auditList = this.auditList.concat(rows);
        this.triggered = false;
        if (rows?.length < this.paramsPage.pageSize) {
          this.loadStatus = "noMore";
        } else {
          this.loadStatus = "more";
        }
      }
      if (this.type == 2) {
        this.paramsPage.type = 3;
        const { rows } = await getFlowingApi(this.paramsPage);
        this.flowingList = this.flowingList.concat(rows);
        this.triggered = false;
        if (rows?.length < this.paramsPage.pageSize) {
          this.loadStatus = "noMore";
        } else {
          this.loadStatus = "more";
        }
      }
    },
    // 下拉刷新
    onRefresh() {
      this.triggered = true;
      this.flowingList = [];
      this.paramsPage.pageNum = 1;
      this.getList();
    },
    // 触底了
    lower() {
      if (this.loadStatus !== "noMore") {
        this.paramsPage.pageNum++;
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  font-weight: 700;
  position: relative;
  &::after {
    content: "";
    width: 57rpx;
    height: 5rpx;
    background-color: #ff7433;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.team {
  .team-tab {
    height: 110rpx;
    .team-tab-box {
      width: 100%;
      height: 110rpx;
      line-height: 110rpx;
      background-color: #fff;
      border-bottom: 2rpx solid rgba($color: #5d5d5d, $alpha: 0.1);
      position: fixed;
      left: 0;
      right: 0;
      z-index: 99;
      display: flex;
      .tab-item {
        height: 100%;
        flex: 1;
        text-align: center;
        color: #000000;
        font-size: 32rpx;
      }
    }
  }
  .team-box {
    min-height: 100vh;
    background-color: #f5f5f5;
    ::v-deep .u-divider.data-v-239d3faa {
      margin: 15rpx 0;
    }
    .card-top {
      display: flex;
      justify-content: space-between;
      .card-top-left {
        display: flex;
        align-items: center;
      }
    }
    .goodsItem {
      display: flex;
      .goodsInfo {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .wordLimit {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          /* 设置最大显示行数 */
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
        .title {
          display: flex;
          justify-content: space-between;
        }
        .goodsNum {
          display: flex;
          justify-content: space-around;
        }
        .btn {
          display: flex;
          justify-content: space-between;
          .goodsBut {
            display: flex;
            border-radius: 6rpx;
            font-size: 24rpx;
            width: 120rpx;
            height: 46rpx;
            background-color: #ff7433;
            align-items: center;
            justify-content: center;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
